<template>
  <view class="score-mall">
    <!-- 用户积分信息 -->
    <view class="score-info">
      <view class="score-card">
        <view class="score-title">我的积分</view>
        <view class="score-number">{{userScore.totalScore}}</view>
        <view class="score-detail">
          <text>可用积分：{{userScore.availableScore}}</text>
          <text>冻结积分：{{userScore.frozenScore}}</text>
        </view>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="item in products" :key="item.id" @click="goToDetail(item)">
        <image :src="item.image" mode="aspectFill" class="product-image"></image>
        <view class="product-info">
          <view class="product-name">{{item.name}}</view>
          <view class="product-desc">{{item.description}}</view>
          <view class="product-bottom">
            <view class="product-score">{{item.score}}积分</view>
            <view class="product-sales">已兑{{item.sales}}件</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { scoreMallData } from '@/data/score_mall.js'

const userScore = ref(scoreMallData.userScore)
const products = ref(scoreMallData.products)

const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/score_mall/detail?id=${item.id}`
  })
}
</script>

<style lang="scss">
.score-mall {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .score-info {
    padding: 20rpx;
    
    .score-card {
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      border-radius: 20rpx;
      padding: 30rpx;
      color: #fff;
      
      .score-title {
        font-size: 28rpx;
      }
      
      .score-number {
        font-size: 60rpx;
        font-weight: bold;
        margin: 20rpx 0;
      }
      
      .score-detail {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
      }
    }
  }
  
  .product-list {
    padding: 20rpx;
    
    .product-item {
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      display: flex;
      
      .product-image {
        width: 200rpx;
        height: 200rpx;
      }
      
      .product-info {
        flex: 1;
        padding: 20rpx;
        
        .product-name {
          font-size: 32rpx;
          font-weight: bold;
        }
        
        .product-desc {
          font-size: 24rpx;
          color: #666;
          margin: 10rpx 0;
        }
        
        .product-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          
          .product-score {
            color: #ff6b6b;
            font-size: 28rpx;
            font-weight: bold;
          }
          
          .product-sales {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style> 